
<template>
  <div class="table">
    <el-container style="height: 590px; border: 1px solid #eee">
      <el-aside width="350px" style="background-color: rgb(238, 241, 246)">
        <!--菜单树,默认展开第一个系统并选中第一个一级节点-->
        <el-tree
            :highlight-current="true"
            show-checkbox
            ref="menu_tree"
            node-key="menu_pk"
            :data="treeData"
            :props="defaultProps"
            @node-click="handleNodeClick"
            @current-change="changeNodeClick"
            :default-expanded-keys="keyArry"
            :expand-on-click-node="clickNode"
        >
           <span class="custom-tree-node" slot-scope="{ node, data }">
            <span>{{ node.label }}</span>
             <span>
              <el-button
                  v-show="data.show"
                  icon="el-icon-circle-plus-outline"
                  size="mini"
                  @click="() => append(data)"
                  circle>
              </el-button>
              <el-button
                  v-show="data.show"
                  icon="el-icon-delete"
                  size="mini"
                  @click="() => remove(node, data)"
                  circle>
              </el-button>
            </span>
          </span>
        </el-tree>
      </el-aside>
      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-tabs v-model="activeName" @tab-click="handleTabClick">
            <el-tab-pane label="查看详情" name="first">
              <ces-view ref="cesView" :data.sync="viewData"></ces-view>
            </el-tab-pane>
            <el-tab-pane label="添加菜单" name="second" v-if="isIfTab">
              <ces-add ref="cesAdd" :data.sync="addData"></ces-add>
            </el-tab-pane>
          </el-tabs>
        </el-header>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import cesView from './view'
import cesAdd from './add'

export default {
  components: {
    cesView, cesAdd
  },
  //弹出页面保存完数据后调用该页面的pages方法重置列表数据
  provide() {
    return {
      refresh: this.refresh,
      hiddenAndGotoTab: this.hiddenAndGotoTab
    }
  },
  //弹出页面保存完数据后调用该页面的pages方法重置列表数据
  data() {
    return {
      /***    菜单树     ***/
      treeData: [],//定义菜单树数组
      defaultProps: {
        children: 'children',
        label: 'menu_name'
      },
      url_tree: '/auth/menu/tree_menu_list',
      /***    菜单树     ***/
      url_delete: '/auth/menu/delete',
      activeName: 'first',
      viewData: {
        menu_pk: '',
        sys_type: '',
      },
      addData: {
        menu_pk: '',
        sys_type: '',
      },
      keyArry: [],
      isIfTab: false,
      priorCheckedData: {},
      clickNode: true,
    }
  },
  created() {
    this.getMenuTree(null);//初始化菜单树
  },
  methods: {
    //获取菜单树
    getMenuTree(nodeKey) {
      this.keyArry = [];
      this.$post(this.url_tree, {menu_status: '1', menu_parent: '0'}).then(res => {
        if (res) {
          this.treeData = res;
          //默认选中第一个一级节点
          if (nodeKey == null) {
            this.$nextTick(() => {
              // tree 元素的ref   value 绑定的node-key
              this.$refs.menu_tree.setCurrentKey(this.treeData[0].menu_pk);
            });
            //赋值
            this.keyArry.push(this.treeData[0].menu_pk);
            this.viewData.menu_pk = this.treeData[0].menu_pk;
            this.viewData.sys_type = this.treeData[0].sys_type;
          } else {
            this.$nextTick(() => {
              // tree 元素的ref   value 绑定的node-key
              this.$refs.menu_tree.setCurrentKey(nodeKey);
            });
            //赋值
            this.keyArry.push(nodeKey);
          }
        }
      });
    },
    //选中菜单树节点事件
    handleNodeClick(data) {
      console.log(data);
      this.clickNode = true;
      this.viewData.menu_pk = data.menu_pk;
      this.viewData.sys_type = data.sys_type;
      this.$set(data, 'show', true);
      this.$refs.cesView.switchChange(false);
    },
    //菜单树节点选中改变事件
    changeNodeClick(data) {
      this.$set(this.priorCheckedData, 'show', false)
      //记录前一个选中的对象
      this.priorCheckedData = data;
    },
    //点击标签页切换事件
    handleTabClick(tab, event) {
      console.log(tab, event);
    },
    //添加方法
    append(data) {
      debugger
      //设置菜单树不能点击
      this.clickNode = false;
      this.isIfTab = true;
      this.activeName = 'second';
      //赋值
      this.addData.menu_pk = data.menu_pk;
      this.addData.sys_type = data.sys_type;
    },
    //删除方法
    remove(node, data) {
      //设置菜单树不能点击
      this.clickNode = false;
      if (data.children.length == 0) {
        this.$confirm('确定要删除数据吗？', '提示', {
          confirmButtonText: '确定', cancleButtonText: '取消', type: 'warning'
        }).then(() => {
          this.$post(this.url_delete, {menu_pk: data.menu_pk}).then(res => {
            this.$message({type: res.code, message: res.msg});
            //刷新左侧菜单树
            this.refresh(data.menu_parent);
            //设置菜单树可以点击
            this.clickNode = true;
          }).catch(() => {

          });
        }).catch(() => {

        });
      } else {
        this.$message({type: '', message: '该菜单含有下级菜单，无法删除'});
      }
    },
    //刷新菜单树
    refresh(nodeKey) {
      this.getMenuTree(nodeKey);
    },
    //隐藏第二个标签页,跳转第一个标签页
    hiddenAndGotoTab(){
      //设置菜单树可以点击
      this.clickNode = true;
      this.isIfTab = true;
      this.activeName = 'first';
    }
  },
  /*全页面监听回车查询事件*/
  mounted() {
    /*let _this = this
    document.onkeydown = function (e) {
      if (e.keyCode === 13) {
        _this.search();
      }
    }*/
  },
}
</script>

<style scoped>
@import "../../../../assets/css/common.css";
</style>